import {
    textIndent,
    templateBox,
    tagContent,
    returnCustomContent,
    appCode,
    importReact
} from "../../../static/utils/codeHTML.js"
export const data = {
    key: "type-button",
    title: "Type-Button",
    titleText: ["The button is used to start an instant operation"],
    CODEList: [
        {
            title: 'Button Type',//标题
            introduction: "There are three types of buttons：primary、danger、default。",//简介
            btnList: [],
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    title: "Button Type",
                    url: '1.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
            ],
            vueHTML: `
                ${templateBox(`
                <span class=code-tag>&lt;div></span>
                    ${textIndent(`
                        ${tagContent("type-button", "", "测试1")
                }
                        <br />
                        ${tagContent("type-button", `
                                <span class=code-attr-name>type</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>default</span><span class=code-punctuation>"</span>`, "测试2")
                }
                        <br />
                        ${tagContent("type-button", `
                                <span class=code-attr-name>type</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>danger</span><span class=code-punctuation>"</span>`, "测试3")
                }
                    `)}
                <span class=code-tag>&lt;&#47;div></span>
                `)}
            `,
            vueCode: `
            <template>
                <div>
                    <type-button>测试1</type-button>
                    <type-button type="default">测试2</type-button>
                    <type-button type="danger">测试3</type-button>
                </div>
            </template>
            `,
            reactHTML: `
            ${importReact("FC")}
            ${appCode()}
            ${textIndent(returnCustomContent(`
                    ${tagContent("type-button", "", "测试1")}
                    <br />
                    ${tagContent("type-button", `
                                <span class=code-attr-name>type</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>default</span><span class=code-punctuation>"</span>`, "测试2")
                }
                    <br />
                    ${tagContent("type-button", `
                                <span class=code-attr-name>type</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span class=code-punctuation>danger</span><span class=code-punctuation>"</span>`, "测试3")
                }
                `))}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
                import { FC } from 'react';
                const App: FC = () => {
                    return (
                        <>
                            <type-button>测试1</type-button>
                            <type-button type="default">测试2</type-button>
                            <type-button type="danger">测试3</type-button>
                        </>
                    )
                };
            `
        },
        {
            title: 'Loading Status',//标题
            introduction: "Set the loading property to true to put the button in a loading state。",//简介
            btnList: [],
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    title: "Loading status",
                    url: '2.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
            ],
            vueHTML: `
                ${templateBox(`
                <span class=code-tag>&lt;div></span>
                    ${textIndent(tagContent("type-button", `
                    <span class=code-attr-name>:loading</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>true</span><span class=code-punctuation>"</span>`, "测试1"))}
                <span class=code-tag>&lt;&#47;div></span>
                `)}
            `,
            vueCode: `
                <template>
                    <div>
                        <type-button :loading="true">测试1</type-button>
                    </div>
                </template>
            `,
            reactHTML: `
            ${importReact("FC")}
            ${appCode()}
            ${textIndent(returnCustomContent(
                tagContent("type-button", `
                    <span class=code-attr-name>loading</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>true</span><span class=code-punctuation>}</span>`, "测试1")
            ))}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
                import { FC } from 'react';
                const App: FC = () => {
                    return (
                        <>
                            <type-button loading={true}>测试1</type-button>
                        </>
                    )
                };
            `
        },
        {
            title: 'Disabled Status',//标题
            introduction: "Set the disabled property to true to put the button in a disabled state。",//简介
            btnList: [],
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    title: "Disabled Status",
                    url: '3.png',
                    width: "",
                    height: "",
                    isOpen: false
                },
            ],
            vueHTML: `
                ${templateBox(`
                <span class=code-tag>&lt;div></span>
                    ${textIndent(tagContent("type-button", `
                    <span class=code-attr-name>:disabled</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>true</span><span class=code-punctuation>"</span>`, "测试1"))}
                <span class=code-tag>&lt;&#47;div></span>
                `)}
            `,
            vueCode: `
                <template>
                    <div>
                        <type-button :disabled="true">测试1</type-button>
                    </div>
                </template>
            `,
            reactHTML: `
            ${importReact("FC")}
            ${appCode()}
            ${textIndent(returnCustomContent(
                tagContent("type-button", `
                    <span class=code-attr-name>disabled</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>true</span><span class=code-punctuation>}</span>`, "测试1")
            ))}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
                import { FC } from 'react';
                const App: FC = () => {
                    return (
                        <>
                            <type-button disabled={true}>测试1</type-button>
                        </>
                    )
                };
            `
        },
    ],
    APIList: [
        {
            field: "type",
            remark: "Button type：primary、danger、default。",
            type: "string",
            default: "primary"
        },
        {
            field: "loading",
            remark: "Loading status",
            type: "boolean",
            default: ""
        },
        {
            field: "disabled",
            remark: "Disabled status",
            type: "boolean",
            default: ""
        },
        {
            field: "styles",
            remark: "Outer style, for example：'width:100px;height:100px'",
            type: "string",
            default: ""
        },
    ],
    otherList: [//其他
        {
            title: "Event",
            titleText: ["We need to bind the element's ref and use addEventListener to listen for events。"],
            header: ["Event Name", "explain"],
            list: [
                {
                    name: "clicks",
                    remark: "Button click event",
                }
            ]

        }
    ]
}